<template>
  <div v-if="detail" ref="printBookOrderDetail" v-loading="loading" class="order-detail">
    <div class="app-main-content-box">
      <div class="app-main-top-box">
        <div class="title">订单详情</div>
        <div class="no-print">
          <el-button-group>
            <el-button
              v-if="(userInfo.shopId===0||userInfo.shopId===detail.order.shopId)&&detail.order.subStatus===1&&(detail.order.subType===0&&!$store.getters.banBtnList.includes('MCH_BTN_BK_FD_CONFIRM')||detail.order.subType===1&&!$store.getters.banBtnList.includes('MCH_BTN_BK_HR_CONFIRM')||detail.order.subType===2&&!$store.getters.banBtnList.includes('MCH_BTN_BK_KTV_CONFIRM'))"
              size="medium"
              round
              type="primary"
              @click="openConfirmOrder"
            >确认订单</el-button>
            <el-button
              v-if="(userInfo.shopId===0||userInfo.shopId===detail.order.shopId)&&detail.order.subStatus===2&&(detail.order.subType===0&&!$store.getters.banBtnList.includes('MCH_BTN_BK_FD_CONSUME')||detail.order.subType===1&&!$store.getters.banBtnList.includes('MCH_BTN_BK_HR_CONSUME')||detail.order.subType===2&&!$store.getters.banBtnList.includes('MCH_BTN_BK_KTV_CONSUME'))"
              size="medium"
              round
              type="primary"
              @click="verifyOrder"
            >顾客已到店</el-button>
            <el-button
              v-if="(userInfo.shopId===0||userInfo.shopId===detail.order.shopId)&&(detail.order.subStatus===1||detail.order.subStatus===2)&&(detail.order.subType===0&&!$store.getters.banBtnList.includes('MCH_BTN_BK_FD_CANCEL')||detail.order.subType===1&&!$store.getters.banBtnList.includes('MCH_BTN_BK_HR_CANCEL')||detail.order.subType===2&&!$store.getters.banBtnList.includes('MCH_BTN_BK_KTV_CANCEL'))"
              size="medium"
              round
              type="danger"
              @click="openCancelOrder"
            >取消订单</el-button>
            <el-button size="medium" round @click="print">打印</el-button>
          </el-button-group>
          <el-button size="medium" round @click="goBack">返回</el-button>
        </div>
      </div>

      <div>
        <!-- 订单信息 -->
        <div class="info-card-container clearfix">
          <div class="info-card-box fl">
            <div class="cell-item">
              <div>下单时间：</div>
              <div>{{ detail.order.createTime }}</div>
            </div>
            <div class="cell-item">
              <div>订单号：</div>
              <div>{{ detail.order.orderNo }}</div>
            </div>
            <div class="cell-item">
              <div>交易单号：</div>
              <div>{{ detail.order.paymentNo?detail.order.paymentNo:'无' }}</div>
            </div>
            <div class="cell-item">
              <div>资源类型：</div>
              <div>{{ detail.order.bizData.alias||subTypeOptions[detail.order.subType] }}</div>
            </div>
            <div v-if="detail.order.subType===0" class="cell-item">
              <div>入住日期：</div>
              <div>{{ detail.order.bizData.beginDay }}</div>
            </div>
            <div v-if="detail.order.subType===0" class="cell-item">
              <div>离店日期：</div>
              <div>{{ detail.order.bizData.endDay }}</div>
            </div>
            <div class="cell-item">
              <div>到店时间：</div>
              <div>{{ detail.order.bizData.beginDay+" "+detail.order.bizData.arrivalTime }}</div>
            </div>
          </div>
          <div class="info-card-box fl">
            <div class="cell-item">
              <div>结账方式：</div>
              <div>在线支付</div>
            </div>
            <div class="cell-item">
              <div>支付方式：</div>
              <div>{{ paymentKeyOptions[detail.order.paymentMethod] }}</div>
            </div>
            <div class="cell-item">
              <div>门店：</div>
              <div>{{ detail.order.shopName }}</div>
            </div>
            <div v-if="detail.order.subStatus===7||detail.order.subStatus===8" class="cell-item">
              <div>取消原因：</div>
              <div>{{ detail.refundRecord.reason?detail.refundRecord.reason:"无" }}</div>
            </div>
            <div class="cell-item">
              <div>备注：</div>
              <div>
                {{ detail.order.remark?detail.order.remark:"无" }}&nbsp;&nbsp;&nbsp;
                <el-button
                  v-if="(userInfo.shopId===0||userInfo.shopId===detail.order.shopId)&&(detail.order.subType===0&&!$store.getters.banBtnList.includes('MCH_BTN_BK_FD_REMARKS')||detail.order.subType===1&&!$store.getters.banBtnList.includes('MCH_BTN_BK_HR_REMARKS')||detail.order.subType===2&&!$store.getters.banBtnList.includes('MCH_BTN_BK_KTV_REMARKS'))"
                  type="text"
                  size="small"
                  icon="el-icon-edit"
                  @click="openEditRemark"
                >修改</el-button>
              </div>
            </div>
          </div>

          <div class="info-card-box fr">
            <div class="substatus">
              订单状态：
              <span
                :class="subStatusClassOptions[detail.order.subStatus]"
              >{{ subStatusOptions[detail.order.subStatus] }}</span>
            </div>
            <div class="price">
              订单金额：
              <span class="app-text-color-primary">￥{{ detail.order.totalFee/100 }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 头部 -->

    <!-- 详情区 -->

    <div class="content">
      <div class="detail-card-container">
        <div class="detail-card-box detail-card-box_l fl">
          <!-- 预定资源 费用明细 -->
          <el-card>
            <AppMainSubTitle :title="'预订资源：'+detail.order.title" />
            <div v-if="detail.order.subType===1||detail.order.subType===2" class="cell-item">
              <div>可用：</div>
              <div>
                {{ detail.order.bizData.beginDay }}
                <span
                  v-if="detail.product.periodStartTime||detail.product.periodEndTime"
                >{{ detail.product.periodStartTime|minsToHourMins }}~{{ detail.product.periodEndTime|minsToHourMins }}</span>
                <span v-else>00:00~24:00</span>
              </div>
            </div>
            <div v-if="detail.order.subType===1||detail.order.subType===2" class="cell-item">
              <div>时长：</div>
              <div>{{ detail.order.bizData.periodDuration/60 }}小时</div>
            </div>
            <div class="cell-item">
              <div>资源说明：</div>
              <div>{{ detail.product.description?detail.product.description:"无" }}</div>
            </div>
            <div class="cell-item">
              <div>资源参数：</div>
              <div>{{ detail.product.attrList }}</div>
            </div>
            <div class="cell-item">
              <div>价格：</div>
              <div>￥{{ detail.product.basePrice/100 }}</div>
            </div>
            <div class="cell-item">
              <div>数量：</div>
              <div>{{ detail.order.bizData.num }}</div>
            </div>
            <div class="cell-item">
              <div>预订人：</div>
              <div>
                <span v-for="(item,index) in detail.order.bizData.checkInList" :key="index">
                  <span v-if="index!==0">&nbsp;|&nbsp;</span>
                  {{ item }}
                </span>
              </div>
            </div>
            <div class="cell-item">
              <div>手机号：</div>
              <div>{{ detail.order.bizData.checkInPhone }}</div>
            </div>
          </el-card>

          <el-card>
            <AppMainSubTitle title="费用明细：" />

            <div class="cell-item">
              <div>房费：</div>
              <div>
                <div
                  v-for="(value,key,index) in detail.order.bizData.roomPrices"
                  :key="index"
                  class="detail-cell"
                >￥{{ value/100 }} x {{ detail.order.bizData.num }}&nbsp;&nbsp;&nbsp;{{ key }}</div>
              </div>
            </div>
            <div class="cell-item">
              <div>优惠：</div>
              <div>
                <div v-if="!detail.order.useDiscount&&!detail.order.usePointsDiscount && !detail.order.useSupermemberPointsDiscount">无</div>
                <!-- 折扣 -->
                <div v-if="detail.order.useDiscount" class="detail-cell">
                  <span class="app-text-color-danger">-￥{{ detail.order.discountFee/100 }}</span>
                  &nbsp;&nbsp;&nbsp;{{ detail.order.discountInfo }}
                </div>

                <!-- 积分 -->
                <div v-if="detail.order.usePointsDiscount || detail.order.useSupermemberPointsDiscount" class="detail-cell">
                  <span class="app-text-color-danger">-￥{{ (detail.order.pointsDiscountFee + detail.order.supermemberPointsDiscountFee)/100 }}</span>
                  &nbsp;&nbsp;&nbsp;{{ detail.order.pointsDiscountNum + detail.order.supermemberPointsDiscountNum }}积分抵扣
                </div>
              </div>
            </div>

            <div class="cell-item">
              <div>合计：</div>
              <div>￥{{ (detail.order.totalFee-detail.order.discountFee-detail.order.pointsDiscountFee - detail.order.supermemberPointsDiscountFee)/100 }}&nbsp;&nbsp;&nbsp;{{ paymentKeyOptions[detail.order.paymentMethod] }}</div>
            </div>

            <div
              v-if="detail.order.subStatus===5||detail.order.subStatus===7||detail.order.subStatus===8||detail.order.subStatus===9"
              class="no-print"
              style="text-align:center"
            >
              <el-button size="small" round type="primary" @click="openCancelCost">取消账单</el-button>
            </div>
          </el-card>
        </div>

        <div class="detail-card-box detail-card-box_r fr">
          <el-card>
            <div>
              <AppMainSubTitle title="顾客信息：" />
              <div class="cell-item">
                <div>顾客姓名：</div>
                <div>{{ detail.order.memberName||detail.order.customerName }}</div>
              </div>
              <div class="cell-item">
                <div>会员等级：</div>
                <div>{{ detail.order.memberLevel }}</div>
              </div>
              <div class="cell-item">
                <div>手机号码：</div>
                <div>{{ detail.order.memberPhone }}</div>
              </div>
            </div>
          </el-card>
          <el-card v-if="detail.statusRecords&&detail.statusRecords.length>0">
            <div>
              <AppMainSubTitle title="审核人：" />
              <div class="cell-item">
                <div>员工姓名：</div>
                <div>{{ detail.statusRecords[detail.statusRecords.length-1].operatorName }}</div>
              </div>
              <div class="cell-item">
                <div>手机号码：</div>
                <div>{{ detail.statusRecords[detail.statusRecords.length-1].operatorPhone||'-' }}</div>
              </div>
              <div class="cell-item">
                <div>员工编号：</div>
                <div>{{ detail.statusRecords[detail.statusRecords.length-1].operatorId||'-' }}</div>
              </div>
              <div class="cell-item">
                <div>审核时间：</div>
                <div>{{ detail.statusRecords[detail.statusRecords.length-1].createTime }}</div>
              </div>
            </div>
          </el-card>
          <el-card v-if="detail.statusRecords&&detail.statusRecords.length>1">
            <div>
              <AppMainSubTitle title="核销人：" />
              <div class="cell-item">
                <div>员工姓名：</div>
                <div>{{ detail.statusRecords[0].operatorName }}</div>
              </div>
              <div class="cell-item">
                <div>手机号码：</div>
                <div>{{ detail.statusRecords[0].operatorPhone }}</div>
              </div>
              <div class="cell-item">
                <div>员工编号：</div>
                <div>{{ detail.statusRecords[0].operatorId }}</div>
              </div>
              <div class="cell-item">
                <div>核销时间：</div>
                <div>{{ detail.statusRecords[0].createTime }}</div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>

    <el-card class="refundList">
      <div class="head">
        <div class="left">
          <div class="title">退款记录：</div>
          <div class="refundAmt">合计已退：{{ totalData.refundAmt }}元</div>
          <div class="refundIngAmt">退款中：{{ totalData.refundIngAmt }}元</div>
        </div>
        <div class="right">
          <el-button type="text" @click="toggleRefundList(true)">全部展开</el-button>
          <el-button type="text" @click="toggleRefundList(false)">全部收起</el-button>
        </div>
      </div>
      <el-table
        ref="dataTreeList"
        :data="refundList"
        style="width: 100%"
      >
        <el-table-column type="expand">
          <template slot-scope="scope">
            <div class="expand">
              <div class="expandLabel">退款详情{{ scope.$index + 1 }}</div>
              <div class="expandVal">
                <div v-for="item of expandArr" :key="item.key" class="expandFormItem">
                  <span class="expandFormLabel">{{ item.label }}：</span>
                  <span class="expandFormValue">{{ scope.row[item.key] }}</span>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="index" label="序号">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="createTime" label="发起退款时间" />
        <el-table-column prop="refundFee" label="退款金额/元" />
        <el-table-column prop="refundStatusZh" label="退款状态" />
        <el-table-column prop="operatorName" label="操作人" />
      </el-table>
    </el-card>
    <!-- 弹框 -->
    <DialogConfirmOrder ref="confirmOrder" />
    <DialogCancelOrder ref="cancelOrder" />
    <DialogCancelCost ref="cancelCost" />
    <DialogEditRemark ref="editRemark" />
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getOrderDetail, changeOrderStatus, qryRefundRecord } from '../../api/record'
import DialogConfirmOrder from './DialogConfirmOrder'
import DialogCancelOrder from './DialogCancelOrder'
import DialogCancelCost from './DialogCancelCost'
import DialogEditRemark from './DialogEditRemark'

export default {
  components: {
    DialogConfirmOrder,
    DialogCancelOrder,
    DialogCancelCost,
    DialogEditRemark
  },
  data() {
    return {
      expandArr: [
        { label: '退款单号', key: 'refundNo' },
        { label: '三方单号', key: 'thirdOrderNo' },
        { label: '交易单号', key: 'orderNo' },

        { label: '业务', key: 'typeZh' },
        { label: '来源', key: 'sourceZh' },
        { label: '退款方式', key: 'refundMethodZh' },

        { label: '退款门店', key: 'shopName' },
        { label: '退款状态', key: 'refundStatusZh' },
        { label: '退款发起时间', key: 'createTime' },

        { label: '退款成功时间', key: 'updateTime' },
        { label: '退款备注', key: 'remark' },
        { label: '原订单金额/元', key: 'totalFee' },

        { label: '退款金额/元', key: 'refundFee' },
        { label: '退款人', key: 'memberName' },
        { label: '操作人', key: 'operatorName' },

        { label: '员工编号', key: 'operatorNo' }
      ],
      subTypeOptions: {
        0: '全日房',
        1: '钟点房',
        2: 'KTV房'
      },
      subStatusOptions: [
        '待支付',
        '待确认',
        '待消费',
        '已消费',
        '支付超时',
        '超时未确认',
        '用户取消支付',
        '用户已取消',
        '商家已取消',
        '已过期'
      ],
      subStatusClassOptions: [
        'app-text-color-warning',
        'app-text-color-warning',
        'app-text-color-warning',
        'app-text-color-success',
        'app-text-color-danger',
        'app-text-color-danger',
        'app-text-color-danger',
        'app-text-color-danger',
        'app-text-color-danger',
        'app-text-color-danger'
      ],
      // 配置
      // 状态
      loading: false,
      // 数据
      refundList: [],
      totalData: {},
      orderNo: '',
      detail: ''
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'paymentKeyOptions'])
  },
  created() {},
  mounted() {},
  methods: {
    toggleRefundList(isExpansion) {
      this.refundList.forEach((item) => {
        this.$refs.dataTreeList.toggleRowExpansion(item, isExpansion)
      })
    },
    /**
       *  获取数据
       */
    // 打开页面
    open({ orderNo, data = '' }) {
      this.detail = ''
      this.orderNo = orderNo
      data ? this.formatData(data) : this.initData()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    // 获取详情
    initData() {
      this.loading = true
      getOrderDetail({ orderNo: this.orderNo })
        .then(res => {
          this.formatData(res.data)
        })
        .catch(err => {})
        .finally(() => {
          this.loading = false
        })
      console.log('qryRefundRecord', qryRefundRecord)
      qryRefundRecord({ orderNo: this.orderNo })
        .then(res => {
          const { pageList, refundAmt, refundIngAmt, refundNum } = res.data
          this.refundList = pageList.list
          this.totalData = {
            refundAmt,
            refundIngAmt,
            refundNum
          }
        })
    },

    // 格式化数据
    formatData(data) {
      data.order.bizData = JSON.parse(data.order.bizData)
      data.order.bizData.customParamsDays = Object.keys(
        data.order.bizData.roomPrices
      ).length
      const roomPrices = data.order.bizData.roomPrices
      for (const key in roomPrices) {
        const newKey = this.$momentMini(key).format('YYYY-MM-DD')
        roomPrices[newKey] = roomPrices[key]
        delete roomPrices[key]
      }
      // 资源参数
      let attrStr = ''
      let i = 0
      data.product.attrList.forEach(v => {
        if (v.attrValue) {
          if (i == 0) {
            attrStr += v.attrValue
          } else {
            attrStr += '\xa0 | \xa0' + v.attrValue
          }
          i++
        }
      })
      data.product.attrList = attrStr || '无'
      this.detail = data
    },

    /**
       * 按钮组
       */
    // 返回
    goBack() {
      if (this.$route.query.from === 'cancelTable'  && this.$route.query.orderNo) return window.close()
      this.resolve && this.resolve()
    },

    // 打开结算
    openCancelCost() {
      this.$refs.cancelCost.open(this.detail).then(res => {})
    },

    // 确认订单
    openConfirmOrder() {
      this.$refs.confirmOrder
        .open(this.detail.order, this.detail.product)
        .then(res => {
          this.initData()
        })
    },

    // 修改备注
    openEditRemark() {
      this.$refs.editRemark.open(this.detail.order).then(res => {
        this.initData()
      })
    },

    // 取消订单
    openCancelOrder() {
      this.$refs.cancelOrder.open(this.detail).then(res => {
        this.initData()
      })
    },

    // 核销订单
    verifyOrder() {
      this.$confirm('是否将该订单标记为已到店?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
        center: true,
        roundButton: true
      })
        .then(() => {
          const params = {}
          params.orderNo = this.orderNo
          params.status = 2
          changeOrderStatus(params)
            .then(res => {
              this.$notify({
                title: '成功',
                message: '确认到店成功',
                type: 'success',
                duration: 2000,
                offset: 40
              })
              this.initData()
            })
            .catch(err => {})
            .finally(() => {})
        })
        .catch(() => {})
    },

    // 打印
    print() {
      this.$print(this.$refs.printBookOrderDetail)
    }
  }
}
</script>

<style scoped lang="scss">
.expand{
  display: flex;
  .expandLabel{
    display: inline-block;
    width: 100px;
    font-weight: bold;
  }
  .expandVal{
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    .expandFormItem{
      width: 33%;
      display: flex;
      margin-bottom: 20px;
      .expandFormLabel{
        flex-shrink: 0;
      }
      .expandFormValue{
        flex: 1;
      }
    }
  }
}
.refundList{
  .head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left{
      display: flex;
      align-items: center;
      div{
        margin-right: 30px;
      }
      .title{
        font-size: 20px;
        font-weight: bold;
      }
    }
  }
}
  .order-detail {
    /**列表容器 */
    .cell-item {
      width: 100%;
      display: flex;
      font-size: 14px;
      line-height: 28px;
      > div:first-child {
        flex: 0 0 80px;
        width: 80px;
        margin-right: 10px;
        color: #606266;
        font-weight: bold;
        text-align: right;
      }
      > div:last-child {
        flex: 1 1 auto;
        color: #303133;
      }
    }

    /* 内容 */
    .content {
      margin-top: 10px;
    }

    /* 订单 */
    .info-card-box {
      overflow: hidden;
      width: 33.33%;
      padding-right: 10px;
      .substatus,
      .price {
        margin-top: 20px;
        font-weight: bold;
        font-size: 18px;
        text-align: right;
      }
    }

    /* 订单详情 */
    .detail-card-container {
      overflow: hidden;
      .detail-card-box {
        width: 50%;
      }
      .detail-card-box_l {
        padding-right: 5px;
      }
      .detail-card-box_r {
        padding-left: 5px;
      }
      .el-card {
        margin-bottom: 10px;
      }
    }
  }
</style>
